<template>
  <div class="apilist">
    <common-breadcrumb :crumb="crumb"></common-breadcrumb>
    <el-row class="selectProject">
      <el-col>
        <el-form ref="form" :model="selectprojectForm" label-width="80px">
          <el-select v-model="selectprojectForm.projectId" @change="getApiByProject(selectprojectForm.projectId)" placeholder="请选择项目名称">
            <el-option label="显示所有api" value="0"></el-option>
            <el-option
              v-for="item in projectList" :key="item.id"
              :label="item.project_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form>
      </el-col>
    </el-row>
    <el-card>
      <el-table :data="tableData">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="发布人" prop="api_author"></el-table-column>
        <el-table-column label="api描述" prop="request_desc"></el-table-column>
        <el-table-column label="url" prop="request_url"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="detail(scope.row.id)"> 接口详情</el-button>
            <el-button type="warning" size="mini" @click="edit(scope.row.id)">编辑接口</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import commonBreadcrumb from '../../components/common/Breadcrumb'
export default {
  components: {
    commonBreadcrumb
  },
  data () {
    return {
      crumb: ['api', 'api列表'],
      tableData: [],
      selectprojectForm: {
        projectId: null
      },
      projectList: []
    }
  },
  created () {
    this.getProjectList()
    this.getApiList()
  },
  methods: {
    async getApiList () {
      const { data: res } = await this.$axios.get('api')
      if (res.code === 1) {
        this.tableData = res.result
      }
    },
    async getProjectList () {
      const { data: res } = await this.$axios.get('allprojects')
      this.projectList = res.result
    },
    async getApiByProject (projectId) {
      if (projectId === '0') {
        this.getApiList()
        return false
      }
      const { data: res } = await this.$axios.get(`apilist/${projectId}`)
      this.tableData = res.result
    },
    detail (id) {
      this.$router.push(`/home/api/${id}`)
    },
    edit (id) {
      this.$router.push(`/admin/editapi/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
  .selectProject {
    margin-bottom: 10px;
  }
</style>
